<template>
  <PageDialog
    :title="title"
    v-model:visible="shows"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <!-- 条件栏 -->
    <div class="model-panel">
      <div class="model-panel-title">
        <p>{{ baseTitle }}</p>
      </div>
      <div class="model-panel-body">
        <BasicInformation :info="infoList" proportionInfo="100px" />
      </div>
    </div>
    <div class="model-panel">
      <div class="model-panel-title"><p>方案详情</p></div>
      <div class="model-panel-body">
        <el-form ref="tableForm" :model="tableInfo" style="width: 100%">
          <DialogTable
            ref="resourceTable"
            v-model:data="tableInfo.data"
            :field-list="tableInfo.fieldList"
            :handle="tableInfo.handle"
            :rowKey="rowKey"
            :tabIndex="true"
            :highlight-row="false"
            :pager="false"
            :check-box="false"
          >
            <template v-slot:col-proportion="scope">
              <el-form-item class="margin-bottom" v-if="scope.row[editFlag]">
                <div class="page-table-input-number-wrapper">
                  <div class="page-table-input-number-left">
                    <div class="page-table-input-number-item">
                      <el-form-item
                        :prop="`data.${scope.$index}.proportion`"
                        :rules="
                          scope.$index >= 0
                            ? [
                                {
                                  validator: validatorProportion,
                                  trigger: 'blur',
                                },
                              ]
                            : []
                        "
                      >
                        <el-input-number
                          style="width: 100%"
                          v-model.lazy="scope.row.proportion"
                          clearable
                          controls-position="right"
                          :precision="2"
                          @change="
                            changeLarge(
                              $event,
                              `data.${scope.$index}.proportion`
                            )
                          "
                          :min="0.01"
                          :max="100"
                        />
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </template>
          </DialogTable>
        </el-form>
      </div>
    </div>
  </PageDialog>
</template>
<script setup name="proportion">
const { proxy } = getCurrentInstance()

const emits = defineEmits()
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  baseTitle: {
    type: String,
    default: '',
  },
  rowKey: {
    type: String,
    default: 'id',
  },
  editFlag: {
    type: String,
    default: 'productId',
  },
  showDialog: {
    type: Boolean,
    default: false,
  },
  tableData: {
    type: Array,
    default: () => {
      return []
    },
  },
  infoList: {
    type: Object,
    default: () => {
      return {
        data: {},
        fieldList: [],
      }
    },
  },
  fieldList: {
    type: Array,
    default: function () {
      return [
        {
          label: '分析方案编码',
          value: 'planNo',
          minWidth: '100px',
        },
        {
          label: '分析方案名称',
          value: 'planName',
        },
        {
          label: '分析部门',
          value: 'deptName',
        },
        {
          label: '分析类型',
          value: 'analysisTypeValue',
        },
        {
          label: '用量占用比例%',
          value: 'proportion',
          type: 'slot',
          width: '160px',
        },
      ]
    },
  },
})
const validatorProportion = (rule, value, callback) => {
  if (!value) {
    return callback('请输入用量占用比例')
  } else {
    callback()
  }
}
// 表格相关
const tableInfo = ref({
  data: proxy.$fn.deepClone(props.tableData),
  fieldList: props.fieldList,
  handle: {
    fixed: 'right',
    label: '操作',
    width: '150',
    btList: [
      {
        label: '删除',
        event: removeRow,
        show: true,
      },
    ],
  },
})
console.log(tableInfo.value)
// 弹窗相关
const dialogInfo = ref({
  width: '1000px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '保存',
      type: 'primary',
      event: save,
      show: true,
    },
  ],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emits('update:showDialog', newValue) // 更新父组件shows
  },
})
function save() {
  proxy.$refs.tableForm.validate((valid) => {
    if (valid) {
      let proportion = 0
      tableInfo.value.data.forEach((el) => {
        proportion = proxy.$fn.accAdd(el.proportion || 0, proportion)
      })
      if (proportion > 100) {
        proxy.$message({
          message: `用量占用比例之和大于100%，请修改`,
          type: 'warning',
          duration: 3500,
          showClose: true,
        })
        return
      }
      handleClose()
      emits('callback', tableInfo.value.data)
    }
  })
}
function changeLarge(e, str) {
  proxy.$refs.tableForm.clearValidate(str)
}
function removeRow(row) {
  tableInfo.value.data = tableInfo.value.data.filter((item) => item !== row)
}
// 关闭弹窗前的回调
function handleClose() {
  shows.value = false
  emits('reset')
}
</script>

<style scoped lang="scss"></style>
